<template>
  <el-card>
    <div class="page">
      <h3 class="applyRecode">已上架商品</h3>
      <el-form class="form" :model="form" ref="form" label-width="100px">
        <el-form-item size="small" label="商品名称/ID：">
          <el-input placeholder="" v-model="form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item size="small" label="助理人/电话：">
          <el-input placeholder="" v-model="form.phone"></el-input>
        </el-form-item> -->
        <el-form-item size="small" label="分类：">
          <el-input placeholder="" v-model="form.kind"></el-input>
        </el-form-item>
        <div><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <div><el-button type="primary" size="small" @click = "exportList(5)">导出列表</el-button></div>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="goodsProduceId" label="产品ID" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="goodsClassName" label="分类" align="center"></el-table-column>
        <el-table-column label="库存" align="center" width="250px">
          <template slot-scope="scope">
            <span class="span">{{ scope.row.goodsStorage }}</span>
            <el-button type="text"  @click="editStorage(scope.row)"  class = "fr" size="small">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSaleNum" label="销量" align="center" width="100px"></el-table-column>
        <el-table-column label="产品价格" align="center">
          <template slot-scope="scope">
            <span class="span">{{ scope.row.goodsBuyPoint }} 积分</span>+<span class="span">{{ scope.row.goodsBuyPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSender" label="发货方" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsSender">助理人发货</span>
            <span v-else-if="scope.row.goodsSender == 2">自营仓发货</span>
            <span v-else-if="scope.row.goodsSender == 3">运营仓发货</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsStatus" label="商品状态" align="center" width="130px">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsStatus == 0">待提审</span>
            <span v-else-if="scope.row.goodsStatus == 1">待审核</span>
            <span v-else-if="scope.row.goodsStatus == 2">待上架</span>
            <span v-else-if="scope.row.goodsStatus == 3">已上架</span>
            <span v-else-if="scope.row.goodsStatus == 4">已下架</span>
            <span v-else-if="scope.row.goodsStatus == 5">已售罄</span>
            <span v-else-if="scope.row.goodsStatus == 6">删除</span>
            <span v-else-if="scope.row.goodsStatus == 7">下架待提审</span>
            <span v-else-if="scope.row.goodsStatus == 8">审核拒绝待提审</span>
            <span v-else-if="scope.row.goodsStatus == 9">违规（禁售）</span>
            <span v-else-if="scope.row.goodsStatus == 10">停售</span>
            <span v-else-if="scope.row.goodsStatus == 11">查封</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="look(1, scope.row)" size="small">查看</el-button>
            <el-button type="text" @click="del(scope.row)" size="small">删除</el-button>
            <el-button type="text" @click = 'upperShelf(scope.row, "0")' size="small">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 按更库存 -->
      <el-dialog title="变更库存" :visible.sync="storage">
        <el-table :data="childGoodsList">
          <el-table-column property="goodsName" label="产品名称" align="center"></el-table-column>
          <el-table-column property="goodsStorage" label="当前库存" align="center"></el-table-column>
          <el-table-column label="出入库类型" align="center">
            <template slot-scope="scope" >
              <el-radio-group v-model = "scope.row.checked" @change = 'changeNumber(scope.$index)'>
                <el-radio label="0">入库</el-radio>
                <el-radio label="1">出库</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="变更数量" align="center" width="160px">
            <template slot-scope="scope">
              <el-input class="changeshu" v-model = "change[scope.$index]" @change = "changeNumber(scope.$index)" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="changeStorage" label="变更库存" align="center"></el-table-column>
        </el-table>
        <div class="subchange">
          <el-button type="primary" @click="chanku" size="small">提交变更</el-button>
        </div>
      </el-dialog>
      <div class="page">
        <el-pagination background style="float:right;margin:26px 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'stay',
  data () {
    return {
      aaa: [],
      storage: false,
      chus: {
        churu: ''
      },
      gridData: [
        {
          change: '',
          changeStorage: ''
        }
      ],
      change: [],
      childGoodsList: [],
      currentPage: 1,
      pagesize: 10,
      total: 0,
      form: {
        name: '',
        kind: ''
      },
      tableData: []
    }
  },
  created () {
    this.init()
    if (this.$store.state.settled === '9') {
      this.goodsStatus = '9'
    }
  },
  methods: {
    //变更数量
    changeNumber (index) {
      let obj = this.childGoodsList[index]
      let opt = this.change[index]
      if (obj.checked === '1') {
        obj.changeStorage = obj.goodsStorage * 1 - opt * 1
      } else {
        obj.changeStorage = obj.goodsStorage * 1 + opt * 1
      }
      obj.change = opt
      if (obj.changeStorage <= 0) {
        obj.changeStorage = ''
      }
      this.$set(this.childGoodsList, index, obj)
    },
    init () {
      this.$tkAjax.post(`${this.$config.baseUrl}/goods/search/page`, {
        searchType: '5',
        goodsNameOrId: this.form.name,
        className: this.form.kind,
        page: this.currentPage,
        merchantId: this.$store.state.merchantId,
        size: this.pagesize
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (Array.isArray(res.data.content.goods)) {
          this.tableData = res.data.content.goods
          if (res.data.content.goods[0]) {
            this.aaa = res.data.content.goods[0].childGoodsList
          }
          this.goodsCommonId = res.data.content.goods.map(item => {
            return item.goodsCommonId
          })
          this.goodsStatus = res.data.content.goods.map(item => {
            return item.goodsStatus
          })
        }
        this.total = res.data.content.total
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    //编辑库存 信息接口
    chanku () {
      let index = this.childGoodsList.findIndex(obj => {
        return obj.goodsStorage * 1 - obj.change * 1 < 0 && obj.checked === '1'
      })
      if (index !== -1) {
        this.$message.warning('出库变更数量不能大于库存')
        return false
      }
      let changeIndex = this.childGoodsList.findIndex(obj => {
        return obj.change !== '' && obj.change * 1 < 0
      })
      if (changeIndex !== -1) {
        this.$message.warning('变更数量不能小于零')
        return false
      }
      var goodsBaseEditVO = {
        goodsCommonId: this.goodsCommonId[0],
        commitType: '1',
        goodsInfoList: this.childGoodsList.map(item => {
          item.goodsStorage = item.changeStorage || item.goodsStorage
          return item
        })
      }
      this.$tkAjax.post(`${this.$config.baseUrl}/goods/edit/storage`, goodsBaseEditVO, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.$message.success(res.data.content)
        this.storage = false
        this.init()
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    //查看
    look (num, row) {
      this.$router.push({
        path: '/matter',
        query: {
          godid: row.goodsCommonId,
          disabled: 'true',
          lk: num
        }
      })
    },
    //单个删除
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$tkAjax.get(`${this.$config.baseUrl}/goods/deal/one?goodsId=` + row.goodsCommonId).then(res => {
          this.$message.success(res.data.content)
          this.init()
        }).catch(err => {
          this.$message.warning(err.data.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //下架
    upperShelf (opt, commitType) {
      this.$confirm('此操作将下架该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$tkAjax.post(`${this.$config.baseUrl}/goods/edit/shelf`, {}, {
          params: {
            goodsId: opt.goodsCommonId,
            commitType
          }
        }).then(({ data }) => {
          this.$message.success(data.content)
          this.init()
        }).catch(err => {
          this.$message.error(err.data.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下架'
        })
      })
    },
    // change () {
    //   this.childGoodsList = this.childGoodsList.map((item, index) => {
    //     item.churu = this.GoodsList[index]
    //     return item
    //   })
    // },
    //显示编辑库存 显示框
    editStorage (data) {
      this.childGoodsList = data.childGoodsList.map(item => {
        item.checked = '1'
        item.change = ''
        return item
      })
      this.change = this.childGoodsList.map(item => {
        return item.change
      })
      this.storage = true
    },
    findInit () {
      this.currentPage = 1
      this.init()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  .form {
    display: flex;
    .el-form-item:nth-child(2){
      margin-left: 28px;
    }
    .el-button {
      border-radius: 4px;
      margin-left: 56px;
    }
  }
  .tables {
    .el-table__body-wrapper .el-table__body .span {
      margin-right: 15px;
    }
  }
  .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__body {
        .discri {
          padding: 7px 0 0;
          float: left;
          color: #f00;
        }
        .subchange {
          text-align: right;
          margin-top: 19px;
        }
      }
    }
  }
}
</style>
